<template>
	<main v-my-directive data-title="问答社区" v-loading.fullscreen.lock="loading">
		<div class="QAHead">
			<div class="questionnav line center">
				<div class="columnLayout interval">
					<div class="center QAfont Horizontalspacing">
						<span>问答社区</span>
						<div class="iconfont icon-dian center maxfont bold fonfff"></div>
						<span class="fonfff">有问必答</span>
					</div>
					<div class="Horizontalspacing minxgap fonfff center">
						<div class="iconfont icon-duigouxiao fonfff minfont center"></div>
						<div>学习技能、解决问题</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div>
				<div class="content qznav">
					<div id="box" class="Genericpadding newsrow">
						<div class="QAgreybox" @click=";(alias = ''), getqa()">{{ $t('message.ALL') }}</div>
						<div class="QAgreybox" v-for="(item, index) in nav" :key="index" @click=";(alias = item.alias), getqa()">{{ item.name }}</div>
					</div>
					<!--  -->
					<div class="Genericpadding columnLayout">
						<div class="QArectangle articlebt">
							<div class="Horizontalspacing interval">
								<div class="qzsolld" :class="{ 'qzsolldav Green': tesorting == 0 }" @click=";(tesorting = 0), (Answered = ''), (Rewardissue = ''), (tosort = 'time'), (tesorting = 0), getqa(), (offset = offset === 'DESC' ? 'ASC' : 'DESC')">最新问题</div>
								<div class="qzsolld" :class="{ 'qzsolldav Green': tesorting == 1 }" @click=";(tesorting = 1), (Answered = ''), (Rewardissue = ''), (tosort = 'popularity'), (curPage = 1), getqa(), (offset = offset === 'DESC' ? 'ASC' : 'DESC')">人气问题</div>
								<!-- 回答为0的 -->
								<div class="qzsolld" :class="{ 'qzsolldav Green': tesorting == 2 }" @click=";(tesorting = 2), (Answered = 'yes'), (Rewardissue = ''), (tosort = 'popularity'), (curPage = 1), getqa(), (offset = offset === 'DESC' ? 'ASC' : 'DESC')">已有回答</div>
							</div>
							<router-link to="askaquestion"
								><div class="qzbuttons"> <div>+</div><span>提交问题</span> </div></router-link
							>
						</div>
						<ul class="columnLayout">
							<li v-if="qalist" v-for="(item, index) in qalist" :key="index" class="qzlist qzlistgrid minxgap">
								<div :class="[item.reply > 0 ? 'Green' : 'grey', item.reply > 0 ? 'QAbox' : 'QAboxno']">
									<div class="columnLayout"
										><span class="center">{{ item.reply }}</span
										><span class="center">回答</span>
									</div>
								</div>
								<div class="columnLayout space-around">
									<router-link :to="'/qaarticle/' + item.alias + '/' + item.id"
										><div class="turngreen qztitle">{{ item.title }}11111111111111111111111111111111111111111111111111111</div></router-link
									>
									<div class="articlebt minfont grey line">
										<div class="Horizontalspacing minaxgap">
											<div class="Horizontalspacing minixgap">
												<el-avatar class="pimgmins" :src="item.user.Avatar" :size="60">
													<div class="image-slot iconfont icon-setting-role"></div>
												</el-avatar>
												<span v-if="item.user.nickname" class="center">{{ item.user.nickname }}</span>
												<span v-else class="center">{{ item.user.username }}</span>
											</div>
											<div class="center left">{{ item.pidname }}</div>
											<div class="Horizontalspacing minixgap left">
												<div class="iconfont icon-riqi_o"></div>
												<span class="center">{{ item.Creationtime }}</span>
											</div>
											<div class="Horizontalspacing minixgap">
												<div class="iconfont icon-icon"></div>
												<span class="center">{{ item.PageView }}</span>
											</div>
											<div class="left Horizontalspacing minixgap" v-if="item.Price > 0">
												<div class="iconfont icon-dashangcishu red"></div>
												<span class="center Horizontalspacing">
													<p>悬赏</p>
													<p class="red">{{ item.Price }}</p>
													<p>元</p>
													<p v-if="item.optimal">已解决</p>
												</span>
											</div>
										</div>
										<!-- 有最佳答案才显示 -->
										<router-link class="center qavwpc" :to="'/qaarticle/' + item.alias + '/' + item.id + '.html'" v-if="item.optimal">问题有人回答啦，进来学习一下吧~</router-link>
										<router-link class="center qavw" :to="'/qaarticle/' + item.alias + '/' + item.id + '.html'" v-if="item.optimal">问题有人回答啦</router-link>
										<router-link class="center Illanswer" :to="'/qaarticle/' + item.alias + '/' + item.id + '.html'" v-else>我来回答</router-link>
									</div>
								</div>
							</li>
							<div v-else>
								<el-skeleton v-for="index in pagesize" :key="index" class="qzlist qzlistgrid minxgap" animated>
									<template #template>
										<div>
											<el-skeleton-item variant="image" class="image-slot" />
										</div>
										<div class="columnLayout space-around">
											<el-skeleton-item variant="h3" style="width: 100%" />
											<el-skeleton-item variant="h3" style="width: 100%" />
										</div>
									</template>
								</el-skeleton>
							</div>
							<!--  -->
						</ul>
						<el-pagination small background class="centerend" :hide-on-single-page="value" @current-change="fun" :current-page="curPage" :page-size="pagesize" layout="prev, pager, next" :total="total"> </el-pagination>
					</div>
				</div>
			</div>
			<div class="left">
				<qaleft></qaleft>
			</div>
		</div>
	</main>
</template>
<script>
	import qaleft from './../components/qaleft'
	import { dataRequest as api, setText } from '@/api/api'
	export default {
		name: 'name',
		components: {
			// 组件
			qaleft,
		},
		data() {
			return {
				//返回值
				loading: true,
				nav: [],
				alias: '',
				qalist: '',
				order: false,
				tesorting: '0',
				grey: 'grey',
				Green: 'Green',
				QAbox: 'QAbox',
				QAboxno: 'QAboxno',
				value: true,

				pagesize: 10, //每页显示数量
				curPage: 1, // 当前页数
				total: 0, // 一共几条数据
				offset: 'DESC',
				tosort: 'time',
				// 已有回答
				Answered: '',
				// 悬赏问题
				Rewardissue: '',
			}
		},
		methods: {
			// 函数
			async get() {
				// 获取分类
				let nav = await api(['getqacat', ''])
				if (nav.code == 200) {
					this.nav = nav.data
					this.getqa()
				}
			},
			// 获取问题

			async getqa() {
				this.qalist = ''
				// 增加  已有回答  和悬赏问题
				console.log({ perPage: this.pagesize, page: this.curPage, offset: this.offset, tosort: this.tosort, alias: this.alias, Answered: this.Answered, Rewardissue: this.Rewardissue })
				let array = await api(['getquestionpage', { perPage: this.pagesize, page: this.curPage, offset: this.offset, tosort: this.tosort, alias: this.alias, Answered: this.Answered, Rewardissue: this.Rewardissue }])
				console.log(array)

				if (array.code == 200) {
					this.total = array.massage / 1
					array = array.data
					for (let i = 0; i < array.length; i++) {
						array[i].reply = array[i].reply.length
						array[i].Price = (Math.round(array[i].Price * 1000) / 1000).toString()
					}
					this.qalist = array
				} else {
					this.total = 0
				}
			},
			async fun(ele = 1) {
				console.log(ele)
				this.curPage = ele
				await this.getqa()

				window.scrollTo({ behavior: 'smooth', top: 10 })
				let arr = []
				for (let i = this.index; i < this.qalist.length; i++) {
					arr.push(this.qalist[i].id)
				}
				api(['QAbrowsing', arr])
			},
		},
		mounted() {
			// 生命周期:
			this.get()
		},
		updated() {
			this.loading = false
		},
	}
</script>
<style scoped>
	.qavwpc {
		display: block;
	}
	.qavw {
		display: none;
	}
	.pimgmins .image-slot {
		font-size: 8px;
	}
	.newsrow {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
	.qztitle {
		white-space: nowrap; /* 防止换行 */
		overflow: hidden; /* 隐藏超出部分 */
		text-overflow: ellipsis; /* 添加省略号 */
		width: 747px;
	}
	.image-slot {
		height: 68px;
		width: 68px;
	}
</style>
<style scoped>
	@media screen and (max-width: 860px) {
		.newsrow {
			justify-content: space-between;
			gap: 0.1rem;
		}
		.qznav {
			width: 100vw;
		}
		.qztitle {
			width: 2.62rem;
		}
		.questionnav {
			height: 1.22rem;
		}
		.qavwpc {
			display: none;
		}
		.qavw {
			display: block;
		}
	}
</style>
